import Vue from "vue";
import App from "./App.vue";
// 1.引入vuex
import Vuex from "vuex";
// 2.让vue 使用vuex
Vue.use(Vuex);
// 3.创建仓库实例
const store = new Vuex.Store({
  state: {
    // 输入框文本内容
    inputValue: "",
    inputPrice: "",
    inputNum: "",
    goodList: [
      {
        name: "诸葛亮",
        price: 1000,
        num: 1,
        checked: false,
      },
      {
        name: "蔡文姬",
        price: 1500,
        num: 1,
        checked: false,
      },
      {
        name: "妲己",
        price: 2000,
        num: 1,
        checked: false,
      },
      {
        name: "鲁班",
        price: 2200,
        num: 1,
        checked: false,
      },
    ],
  },
  mutations: {
    //为 store 的inputValue 赋值
    setInputValue(state, val) {
      state.inputValue = val;
      
    },
    // 价格
    setPriceValue(state, val) {
      state.inputPrice = val;
    },
    // 数量
    setNumValue(state, val) {
      state.inputNum = val;
    },
    // 添加列表项
    addIem(state) {
      // 以对象的形式添加
      const obj = {
        name: state.inputValue.trim(),
        price: state.inputPrice,
        num: state.inputNum,
        checked: false,
      };
      // push推给数组
      state.goodList.push(obj);
      state.inputValue = "";
      state.inputPrice = "";
      state.inputNum = "";
    },
  },
});
Vue.config.productionTip = false;
// 4.让仓库实例和vue 实例关联起来
new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");
